<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>黄金价格计算器</title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		body {
			background-color: #f5f5f5;
		}
		#app {
			background-color: #fff;
			width: 400px;
			margin: 10px auto;
			padding: 20px;
			box-shadow: 0 0 10px 1px #999;
		}
		label {
			font-size: 20px;
		}
		input {
			height: 35px;
			margin: 10px;
			border: 2px solid #999;
			border-radius: 3px;
			padding: 0 10px;
			outline: none;
			font-size: 16px;
		}
		span {
			color: red;
			font-weight: 600;
		}
		p {
			font-size: 18px;
			line-height: 45px;
			color: #666;
		}
		i {
			color: blue;
		}
	</style>
	<body>
		<div id="app">
			<h3 align="center">黄金价格计算器</h3>
			<label>买入单价：</label>
			<input v-model.number="buyPrice" type="number">
			<span>元/克</span> <br>
			<label>卖出单价：</label>
			<input v-model.number="sellPrice" type="number">
			<span>元/克</span> <br>
			<label>手续费率：</label>
			<input v-model.number="feeRate" type="number">
			<span>%</span> <br>
			<label>购买数量：</label>
			<input v-model.number="quantity" type="number">
			<span>克</span> <br>
			<hr>
			<p>
				成本价： <i>{{ costPrice }} 元</i> <br>
				卖出价：<i>{{ sellPriceTotal }} 元</i><br>
				手续费：<i>{{ fee }} 元</i><br>
				赎回获得：<i>{{ redeemedAmount }} 元</i><br>
				净收入：<i>{{ netIncome }} 元</i>
			</p>

			<hr>
			人民币： <input type="number" v-model.number="cny" /> <br>
			<b>美元：{{ dollar }}</b> <br>
			<b>欧元：{{ euro }}</b> <br>
			<b>日元：{{ yen }}</b> <br>
			<b>韩元：{{ krw }}</b> <br>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						cny: '', // 人民币
						dollar: '', // 美元
						euro: '', // 欧元
						yen: '', // 日元
						krw: '', // 韩元
						
						buyPrice: '',
						sellPrice: '',
						feeRate: 0.3,
						quantity: ''
					}
				},
				watch: { // 监听属性
					cny(newVal, oldVal) {
						this.dollar = (newVal * 0.14).toFixed(2);
						this.euro = (newVal * 0.13).toFixed(2);
						this.yen = (newVal * 21.28).toFixed(2);
						this.krw = (newVal * 199.48).toFixed(2);
					}
				},
				computed: {
					costPrice() {
						return (this.buyPrice * this.quantity).toFixed(2);
					},
					sellPriceTotal() {
						return (this.sellPrice * this.quantity).toFixed(2);
					},
					fee() {
						return ((this.sellPrice * this.quantity) * this.feeRate / 100).toFixed(2);
					},
					redeemedAmount() {
						return (this.sellPriceTotal - this.fee).toFixed(2);
					},
					netIncome() {
						return (this.redeemedAmount - this.costPrice).toFixed(2);
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
